<template>
  <div class="mainContent">
    <div>
      <div class="titleRow">
        <div class="title">考证合格率</div>
        <div class="btn">
          <Selector
            category="周月年"
            v-model="exameQueryParams.time"
            style="width: 84px"
            :border="false"
            @getItem="handleGetExame"
            :clearable="false"
          />
        </div>
      </div>
      <div class="examcontent">
        <div style="width:100%">
          <div
            id="echartItem1"
            style="width: 220px; height: 220px; margin: auto"
          ></div>
          <div class="exameText flex jaround mgt10">
            <div>
              <div>{{ exameData.Total }}</div>
              <div>总数</div>
            </div>
            <div>
              <div style="color: #3095ff">{{ exameData.Pass }}</div>
              <div>合格</div>
            </div>
            <div>
              <div style="color: #fb4a4a">{{ exameData.NoPass }}</div>
              <div>不合格</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="titleRow">
        <div class="title">场地使用率</div>
        <div class="btn">
          <Selector
            category="周月年"
            v-model="placeQueryParams.time"
            style="width: 84px"
            :border="false"
            @getItem="handleGetPlaceUseCount"
            :clearable="false"
          />
        </div>
      </div>
      <div class="examcontent">
        <div
          id="echartItem2"
          style="width: 100%; height: 300px; margin: auto"
        ></div>
      </div>
    </div>

    <div>
      <div class="titleRow">
        <div class="title">快捷访问</div>
        <div class="btn"></div>
      </div>
      <div id="echartItem3"></div>
      <div class="quicklyContent">
        <div
          v-for="item in quicklyList"
          class="item pointer"
          @click="goPage(item.path)"
        >
          <div>
            <el-image
              style="width: 40px; height: 40px"
              :src="item.src"
              fit="fill"
            />
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <div>
      <div class="titleRow">
        <div class="title">6S问题统计</div>
        <div class="btn">
          <Selector
            category="周月年"
            v-model="sixQueryParams.time"
            style="width: 84px"
            :border="false"
            :clearable="false"
            @getItem="handleGetSixProblem"
          />
        </div>
      </div>
        <div class="examcontent">
          <div style="width:100%">
            <div class="sixMainContent">
              <div
                id="echartItem4"
                style="width: 100px; height: 100px; margin: auto"
              ></div>
              <div class="sixContent">
                <div>
                  <div class="num" style="color: #fa4a4a">
                    {{ option4Data[0].num }}
                  </div>
                  <div class="name">{{ option4Data[0].name }}</div>
                </div>
              </div>
            </div>

            <div class="flex jaround">
              <div style="position: relative">
                <div class="sixContent">
                  <div>
                    <div class="num" style="color: #0bb4fa">
                      {{ option41Data[0].num }}
                    </div>
                    <div class="name">{{ option41Data[0].name }}</div>
                  </div>
                </div>
                <div
                  id="echartItem4-1"
                  style="width: 100px; height: 100px"
                ></div>
              </div>
              <div style="position: relative">
                <div class="sixContent">
                  <div>
                    <div class="num" style="color: #19d48b">
                      {{ option42Data[0].num }}
                    </div>
                    <div class="name">{{ option42Data[0].name }}</div>
                  </div>
                </div>
                <div
                  id="echartItem4-2"
                  style="width: 100px; height: 100px"
                ></div>
              </div>
            </div>
          </div>
        </div>
    </div>

    <div>
      <div class="titleRow">
        <div class="title">课程使用排名</div>
        <div class="btn"></div>
      </div>
      <div class="courseContent">
        <div
          v-for="item in courseList"
          class="flex acenter jbetween item"
          style="padding: 0 10px"
        >
          <div class="name overShow">{{ item.Name }}</div>
          <div style="width: 80%">
            <el-progress
              :percentage="item.progress"
              :show-text="false"
            ></el-progress>
          </div>
          <div class="num">{{ item.UseCount }}</div>
        </div>
      </div>
    </div>

    <!-- <div>
      <div class="titleRow">
        <div class="title">问题数据统计</div>
        <div class="btn">
      
        </div>
      </div>
      <div id="echartItem6" style="height: 220px; margin: auto"></div>
    </div>
    <div>
      <div id="echartItem7"></div>
    </div> -->

    <div class="longItem">
      <div class="deviceItem" v-for="item in deviceStatus">
        <div class="deviceIcon">
          <el-image
            style="width: 78px; height: 78px"
            :src="item.src"
            fit="fill"
          />
        </div>
        <div class="topRow">
          <div class="deviceNum" :style="'color:' + item.color">
            {{ item.total }}
          </div>
          <div class="deviceTitle">{{ item.title }}</div>
        </div>
        <div class="deviceStatus">
          <div class="statuItem" v-for="statu in item.status">
            <div class="statuIcon">
              <el-image
                style="width: 5px; height: 20px"
                :src="statu.icon"
                fit="fill"
              />
            </div>
            <div class="statuName">{{ statu.name }}</div>
            <div class="statuNum" :style="'color:' + statu.color">
              {{ statu.num }}
            </div>
          </div>
        </div>
      </div>
      <div id="echartItem8"></div>
    </div>
  </div>
</template>

<script setup name="MainIndex">
import { onMounted } from 'vue';
import KZSJ from '@/assets/images/PCIndex/考证数据.svg';
import SIXD from '@/assets/images/PCIndex/6S数据.svg';
import JXCD from '@/assets/images/PCIndex/教学场地.svg';
import BJGL from '@/assets/images/PCIndex/班级管理.svg';
import ZBTZ from '@/assets/images/PCIndex/装备台账.svg';
import KCGL from '@/assets/images/PCIndex/课程管理.svg';
import ZBZS from '@/assets/images/PCIndex/装备总数.svg';
import GJZS from '@/assets/images/PCIndex/工具总数.svg';

import ZC from '@/assets/images/PCIndex/正常.svg';
import SYZ from '@/assets/images/PCIndex/使用中.svg';
import BYZ from '@/assets/images/PCIndex/保养中.svg';
import WXZ from '@/assets/images/PCIndex/维修中.svg';
import YTY from '@/assets/images/PCIndex/已停用.svg';

import {
  GetDeviceStateStatistics,
  GetPlaceUseRate,
  Get6SProblemStatistics,
  GetExamPassRate,
  GetCourseUseRank
} from '@/api/index/index.js';

import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const router = useRouter();
const option1 = ref();
const option2 = ref();
const option4 = ref();
const option41 = ref();
const option42 = ref();
const option6 = ref();
const sixQueryParams = ref({
  time: '1'
});
const exameQueryParams = ref({
  time: '1'
});
const formatPlaceData = ref({
  time: [],
  value: []
});
const placeData = ref([]);
const exameData = ref({});
const placeQueryParams = ref({ time: '1' });
const problemQueryParams = ref({});
const deviceStatus = reactive([
  {
    total: 0,
    title: '装备总数',
    src: ZBZS,
    color: '#005DFF',
    status: [
      {
        color: '#0DC381',
        icon: ZC,
        name: '正常',
        num: '0'
      },
      { color: '#3E7DF4', icon: SYZ, name: '使用中', num: '0' },
      { color: '#FFC300', icon: BYZ, name: '保养中', num: '0' },
      { color: '#FC5151', icon: WXZ, name: '维修中', num: '0' },
      { color: '#888888', icon: YTY, name: '已停用', num: '0' }
    ]
  },
  {
    total: 0,
    title: '工具总数',
    color: '#0DC381',
    src: GJZS,
    status: [
      { color: '#0DC381', icon: ZC, name: '在库', num: '0' },
      { color: '#3E7DF4', icon: SYZ, name: '使用中', num: '0' },
      { color: '#FFC300', icon: BYZ, name: '校验中', num: '0' },
      { color: '#FC5151', icon: WXZ, name: '维修中', num: '0' },
      { color: '#888888', icon: YTY, name: '已停用', num: '0' }
    ]
  }
]);
const option4Data = reactive([
  {
    value: 0,
    num: 0,
    name: '待处理',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-10%']
    }
  }
]);
const option41Data = reactive([
  {
    value: 0,
    num: 0,
    name: '待确认',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-10%']
    }
  }
]);
const option42Data = reactive([
  {
    value: 0,
    num: 0,
    name: '已完成',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-10%']
    }
  }
]);
const courseList = ref([]);
const quicklyList = ref([
  {
    name: '考证数据',
    src: KZSJ,
    path: '/studen/TextualResearchData'
  },
  {
    name: '教学场地',
    src: JXCD,
    path: '/site/TeachingSite'
  },
  {
    name: '装备台账',
    src: ZBTZ,
    path: '/teachingDevice/DeviceAccount'
  },
  {
    name: '班级管理',
    src: BJGL,
    path: '/school/Class'
  },
  {
    name: '6S数据',
    src: SIXD,
    path: '/sixManage/SixData'
  },
  {
    name: '课程管理',
    src: KCGL,
    path: '/lesson/LessonSystem'
  }
]);
const problemCount = ref({
  all: 200,
  close: 150
});
onMounted(() => {
  window.addEventListener('resize', resizeEcharts, true);
  init();
});
onUnmounted(() => {
  window.removeEventListener('resize', resizeEcharts, true);
});
onActivated(() => {
  window.addEventListener('resize', resizeEcharts, true);
});
onDeactivated(() => {
  window.removeEventListener('resize', resizeEcharts, true);
});

async function getCourseRank() {
  let res = await GetCourseUseRank();
  let total = 0;
  res.data?.map(item => {
    total += Number(item.UseCount);
  });
  res.data?.forEach(item => {
    item.progress = (item.UseCount / total) * 100;
  });
  console.log(res.data);
  courseList.value = res.data;
}

async function init() {
  await getDeviceStatus(1);
  await getDeviceStatus(2);
  await getCourseRank();
  // await handleGetSixProblem();
  await handleGetExame();
  await handleGetPlaceUseCount();
  // initEchartItem1();
  // initEchartItem2();
  initEchartItem4();
  // initEchartItem6();
}

async function handleGetPlaceUseCount(val) {
  try {
    let query = {};
    if (val) {
      query = {
        StartTime: val[0],
        EndTime: val[1]
      };
    } else {
      query.StartTime = proxy
        .$moment()
        .subtract(1, 'week')
        .format('YYYY-MM-DD');
      query.EndTime = proxy.$moment().format('YYYY-MM-DD');
    }
    let res = await GetPlaceUseRate(query);
    formatPlaceData.value = {
      time: [],
      value: []
    };
    switch (Number(placeQueryParams.value.time)) {
      case 1:
        res.data?.map(item => {
          formatPlaceData.value.time.push(item.Date?.slice(8, 10) + '日');
          formatPlaceData.value.value.push(item.Value);
        });
        break;
      case 2:
        res.data?.map(item => {
          formatPlaceData.value.time.push(item.Date?.slice(8, 10) + '日');
          formatPlaceData.value.value.push(item.Value);
        });
        break;
      case 3:
        let months = {};
        res.data?.map((item, index) => {
          if (!months[item.Date?.slice(0, 7)]) {
            months[item.Date?.slice(0, 7)] = item.Value;
          } else {
            months[item.Date?.slice(0, 7)] =
              Number(months[item.Date?.slice(0, 7)]) + Number(item.Value);
          }
        });
        formatPlaceData.value.time = Object.keys(months)?.map(item =>
          item.slice(5, 7)
        );
        formatPlaceData.value.value = Object.values(months);
        break;
    }
    placeData.value = res.data;
    initEchartItem2();
  } catch (error) {
    console.log(error);
  }
}

async function handleGetExame(val) {
  try {
    let query = {};
    if (val) {
      query = {
        StartTime: val[0],
        EndTime: val[1]
      };
    } else {
      query.StartTime = proxy
        .$moment()
        .subtract(1, 'week')
        .format('YYYY-MM-DD');
      query.EndTime = proxy.$moment().format('YYYY-MM-DD');
    }
    let res = await GetExamPassRate(query);

    exameData.value = res.data;
    initEchartItem1();
  } catch (error) {
    console.log(error);
  }
}

async function handleGetSixProblem(val) {
  try {
    let query = {};
    if (val) {
      query = {
        StartTime: val[0],
        EndTime: val[1]
      };
    } else {
      query.StartTime = proxy
        .$moment()
        .subtract(1, 'week')
        .format('YYYY-MM-DD');
      query.EndTime = proxy.$moment().format('YYYY-MM-DD');
    }
    let res = await Get6SProblemStatistics(query);
    option4Data[0].num = res.data.Process;
    option4Data[0].value = res.data.Process
      ? Math.floor((res.data.Process / res.data.Total) * 100)
      : 0;
    option41Data[0].num = res.data.Confirm;
    option41Data[0].value = res.data.Confirm
      ? Math.floor((res.data.Confirm / res.data.Total) * 100)
      : 0;
    option42Data[0].num = res.data.Finish;
    option42Data[0].value = res.data.Finish
      ? Math.floor((res.data.Finish / res.data.Total) * 100)
      : 0;
    initEchartItem4();
  } catch (error) {
    console.log(error);
  }
}

async function getDeviceStatus(type) {
  try {
    let res = await GetDeviceStateStatistics({ Category: type });
    let index = Number(type) - 1;
    deviceStatus[index].total = res.data.Total;
    deviceStatus[index]['status'][0]['num'] = res.data.Normal;
    deviceStatus[index]['status'][1]['num'] = res.data.Use;
    deviceStatus[index]['status'][2]['num'] = res.data.Maintain;
    deviceStatus[index]['status'][3]['num'] = res.data.Repair;
    deviceStatus[index]['status'][4]['num'] = res.data.Disable;
  } catch (error) {
    console.log(error);
  }
}

function formatProblem(name) {
  let str = '';
  switch (name) {
    case '问题总数':
      str = name + problemCount.value.all;
      break;
    case '已关闭数':
      str = name + problemCount.value.close;
      break;
  }
  return str;
}

function resizeEcharts() {
  initEchartItem1();
  initEchartItem2();
  initEchartItem4();
  // initEchartItem6();
}

function initEchartItem1() {
  let chartDom = document.getElementById('echartItem1');
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.getInstanceByDom(chartDom).dispose();
  }

  let myChart = echarts.init(chartDom);
  option1.value = {
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    // },
    series: [
      {
        name: '考证数据',
        type: 'pie',
        radius: '100%',
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 6
        },
        label: {
          position: 'inner',
          formatter: '{d}%',
          // show: false,
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            // fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: exameData.value.NoPass,
            name: '不合格',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FB4A4A' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FF7C7C' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            value: exameData.value.Pass,
            name: '合格',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#60AEFF' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#0073FF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
    ]
  };
  myChart.setOption(option1.value);
}
function initEchartItem2() {
  let chartDom = document.getElementById('echartItem2');
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.getInstanceByDom(chartDom).dispose();
  }

  let myChart = echarts.init(chartDom);
  option2.value = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // data: ["场地1", "场地2"],
      show: false
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: formatPlaceData.value?.time
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        lineStyle: {
          width: 0
        },
        smooth: true,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        showSymbol: false,
        name: '使用次数',
        type: 'line',
        stack: 'Total',
        data: formatPlaceData.value?.value
      }
    ]
  };
  myChart.setOption(option2.value);
}
function initEchartItem4() {
  let chartDom = document.getElementById('echartItem4');
  let chartDom1 = document.getElementById('echartItem4-1');
  let chartDom2 = document.getElementById('echartItem4-2');
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.getInstanceByDom(chartDom).dispose();
  }
  if (echarts.getInstanceByDom(chartDom1)) {
    echarts.getInstanceByDom(chartDom1).dispose();
  }
  if (echarts.getInstanceByDom(chartDom2)) {
    echarts.getInstanceByDom(chartDom2).dispose();
  }
  let myChart = echarts.init(chartDom);
  let myChart1 = echarts.init(chartDom1);
  let myChart2 = echarts.init(chartDom2);
  option4.value = {
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        radius: '100%',
        clockwise: false,
        pointer: {
          show: false
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#FF8F90' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#FA4A49' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false
        },
        axisLine: {
          show: false
          // lineStyle: {
          //   //   width: 10,
          //   shadowColor: 'rgba(0, 0, 0, 0.5)',
          //   //   shadowOffsetX: 0,
          //   //   shadowOffsetY: 0,
          //   shadowBlur: 10
          //   //   color: [[1, "#fff"]],
          // }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: option4Data,
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: '#FA4A49',
          // borderColor: "#FA4A49",
          borderRadius: 20,
          // borderWidth: 1,
          formatter: function (val) {
            return option4Data[0].num;
          }
        }
      }
    ]
  };
  option41.value = {
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        clockwise: false,
        radius: '100%',
        pointer: {
          show: false
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0BB4FA' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#0BB4FA' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            // borderWidth: 1,
            // borderColor: "#464646",
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 10
            // shadowColor: "#ddd",
            // shadowOffsetX: 0,
            // shadowOffsetY: 0,
            // shadowBlur: 10,
            // color: [[1, "#fff"]],
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: option41Data,
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: '#0BB4FA',
          borderColor: '#0BB4FA',
          borderRadius: 20,
          // borderWidth: 1,
          formatter: function (val) {
            return option41Data[0].num;
          }
        }
      }
    ]
  };
  option42.value = {
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        radius: '100%',
        clockwise: false,
        pointer: {
          show: false
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#46E5A3' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#0CCF83' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            // borderWidth: 1,
            // borderColor: "#464646",
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 10
            // shadowColor: "#ddd",
            // shadowOffsetX: 0,
            // shadowOffsetY: 0,
            // shadowBlur: 10,
            // color: [[1, "#fff"]],
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: option42Data,
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: '#19D48B',
          borderColor: '#19D48B',
          borderRadius: 20,
          // borderWidth: 1,
          formatter: function (val) {
            return option42Data[0].num;
          }
        }
      }
    ]
  };
  myChart.setOption(option4.value);
  myChart1.setOption(option41.value);
  myChart2.setOption(option42.value);
}
function initEchartItem6() {
  let chartDom = document.getElementById('echartItem6');
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.getInstanceByDom(chartDom).dispose();
  }
  let myChart = echarts.init(chartDom);
  option6.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    color: [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#36A6EC' },
        { offset: 1, color: '#124BFF' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#F24CA4' },
        { offset: 1, color: '#D13EC1' }
      ])
    ],
    legend: {
      bottom: 0,
      itemGap: 40,
      formatter: function (name) {
        let str = formatProblem(name);
        return str;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '16%',
      containLabel: true
    },
    xAxis: [
      {
        show: false,
        type: 'category',
        data: ['问题统计'],
        axisTick: {
          // alignWithLabel: true,
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '问题总数',
        type: 'bar',
        barWidth: '30%',
        data: [200]
      },
      {
        type: 'bar',
        name: '已关闭数',
        barWidth: '30%',
        data: [150]
      }
    ]
  };
  myChart.setOption(option6.value);
}
function goPage(path) {
  router.push(path);
}
</script>

<style lang="scss" scoped>
.mainContent {
  display: grid;
  min-height: calc(100vh - 108px);
  grid-gap: 10px;
  grid-template:
    'a b c'
    'a b f'
    'd h f'
    'd h f';
  grid-template-columns: repeat(3, 1fr);
}
.mainContent > div {
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 0 8px rgb(216, 214, 214);
  .examcontent {
    display: flex;
    align-items: center;
    height: 80%;
    justify-content: center;
    width: 100%;
  }
  &:nth-child(1) {
    grid-area: a;
  }
  &:nth-child(2) {
    grid-area: b;
  }
  &:nth-child(4) {
    grid-area: d;
  }
  &:nth-child(5) {
    grid-area: h;
  }

  &:nth-child(4),
  &:nth-child(5),
  &:nth-child(6) {
    background-color: white;
  }
  &:nth-child(3) {
    min-width: 320px;
  }

  &:nth-child(6) {
    grid-area: f;
    background-color: #eee;
  }
}
.quicklyContent {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    display: flex;
    align-items: center;

    width: 48%;
    word-wrap: none;
    word-break: keep-all;
    box-shadow: 0 0 8px rgb(216, 214, 214);
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 10px;
    .name {
      margin-left: 10px;
    }
  }
}
.courseContent {
  height: 230px;
  overflow-y: auto;
  .item {
    margin-bottom: 4px;

    .name {
      width: 90px;
      text-align-last: justify;
      // padding: 0 4px;
      font-size: 14px;
      margin-right: 20px;
    }
    .num {
      margin-left: 10px;
    }
  }
  :deep(.el-progress) {
    .el-progress-bar {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #2797f8, #43dfeb);
      }
    }
  }
}
#echartItem6 {
  width: 100%;
}
/* 当页面宽度大于960px小于1200px */
@media screen and (min-width: 960px) and (max-width: 1200px) {
  #echartItem6 {
    width: 300px;
  }
}

/* 当页面宽度大于600px小于960px */
@media screen and (min-width: 600px) and (max-width: 960px) {
  #echartItem6 {
    width: 250px;
  }
}

/* 当页面宽度大于300px小于600px */
@media screen and (min-width: 300px) and (max-width: 600px) {
  #echartItem6 {
    width: 200px;
  }
}

/* 当页面宽度小于300px*/
@media screen and (max-width: 300px) {
  #echartItem6 {
    width: 200px;
  }
}
.titleRow {
  padding: 4px 10px 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  line-height: 40px;
  .title {
    font-weight: bold;
  }
}
.exameText {
  text-align: center;
}
.longItem {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  .deviceItem {
    background-color: white;
    width: 100%;
    margin: 10px;
    margin-bottom: 10px;
    margin-top: 50px;
    border-radius: 10px;
    .deviceIcon {
      display: flex;
      justify-content: center;
      margin-top: -40px;
    }
    .topRow {
      text-align: center;
      margin-top: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .deviceStatus {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 4px;
      .statuItem {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 6px;
        margin: 0 4px;
        .statuIcon {
          margin-right: 4px;
          margin-bottom: -4px;
        }
        .statuNum {
          margin-left: 4px;
        }
      }
    }
  }
}
.sixMainContent {
  position: relative;
  width: 100px;
  height: 100px;
  margin: auto;
}
.sixContent {
  position: absolute;
  background-color: white;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  top: 10px;
  left: 10px;
  box-shadow: 0 0 6px rgb(0, 0, 0, 0.2);
  text-align: center;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  .name {
    font-size: 14px;
  }
}
.app-main .mainContent {
  min-height: calc(100vh - 70px);
}
.hasTagsView .app-main .mainContent {
  min-height: calc(100vh - 104px);
}
</style>
